<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Store test page</title>
<link type="text/css" href="css/smoothness/jquery-ui-1.8.22.custom.css"
	rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
<script type="text/javascript">
	$(function() {
		(function($) {
		$.fn.autoprogress = function (options) {
				
			options = $.extend({
					progressCheckUrl: 'localhost',
					jobHash: null,
					delay: 1000
					}, options || {});

			var progressBar = $(this);	
			progressBar.progressbar({value: 0});

			var checkProgress = function() {
				$.get(options.progressCheckUrl, $.param({'hash': options.jobHash}), function(data) {
					$('<div> ' + data + '</div>').appendTo('body');
					progressBar.progressbar('value', parseInt(data));	
					if (data >= 100) {
						window.clearInterval(progressBar.attr('check-progress'));
					}
				});
			};	

			$(this).attr('check-progress', window.setInterval(checkProgress, options.delay));	
			
		}
		})(jQuery);

		

		$.get('job.json', function(data) {
			$("#progress").autoprogress({
				progressCheckUrl: 'progress.json',
				jobHash: data,
				delay: 3000
			});
		});

	});
</script>
<style type="text/css">
</style>
</head>
<body>
	<h1>Progress test page</h1>
	<p></p>

	<div id="progress" />
</body>
</html>



